import React, { useState, useEffect } from 'react';
import { Table, Card, Spin, message } from 'antd';
import { $getTransaction } from '../../api/transactionApi'; // 引入交易记录 API
import './Transaction.scss';

const Transaction = () => {
    const [transactions, setTransactions] = useState([]);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        const loadTransactions = async () => {
            setLoading(true);
            try {
                const response = await $getTransaction();
                setTransactions(response.data); // 设置交易记录数据
            } catch (error) {
                message.error(error.msg || '获取交易记录失败');
            } finally {
                setLoading(false);
            }
        };
        loadTransactions();
    }, []);

    const columns = [
        { title: '序号', dataIndex: 'id', key: 'id', width: 60 },
        { title: '产品代码', dataIndex: 'products_id', key: 'products_id', width: 120 },
        { title: '产品名称', dataIndex: 'products_name', key: 'products_name', width: 150 },
        { title: '用户ID', dataIndex: 'userid', key: 'userid', width: 100 },
        { title: '资产种类', dataIndex: 'type', key: 'type', width: 100 },
        { title: '交易类型', dataIndex: 'trade_type', key: 'trade_type', width: 100 },
        { title: '交易数量', dataIndex: 'quantity', key: 'quantity', width: 100 },
        { title: '交易时间', dataIndex: 'trade_time', key: 'trade_time', width: 180 },
        { title: '交易金额', dataIndex: 'trade_amount', key: 'trade_amount', width: 120 },
        { title: '手续费', dataIndex: 'fee', key: 'fee', width: 100 }
    ];

    return (
        <div className="transaction-page">
            <Card title="交易记录" bordered={false}>
                {loading ? (
                    <div className="spin-container">
                        <Spin tip="加载中..." />
                    </div>
                ) : (
                    <Table
                        rowKey="id"
                        dataSource={transactions}
                        columns={columns}
                        pagination={{ pageSize: 20 }}
                        scroll={{ x: 'max-content', y: 600 }}
                    />
                )}
            </Card>
        </div>
    );
};

export default Transaction;